<template> 
  <div class="register-box">
    <img class="logo-rz" src="../assets/img/logo-rz.png">
    <div class="main-content">
      <div class="input-box"><span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diary-zhanghao"></use>
                </svg></span><input v-model="zhuCeName" id="account" type="text"></div>
      <div class="input-box"><span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diary-password"></use>
                </svg></span><input v-model="zhuCeWords" id="password" type="password"></div>
    </div>
    <button class="submit" v-on:click="registerNew">注册</button>
    <div class="link-register">
      <p v-on:click="changeView">登录</p>
    </div>
  </div>
</template>
<script>
import Bus from '../assets/js/common/bus'
const regexName = new RegExp('^[0-9a-zA-Z\u4e00-\u9fa5_]{2,12}$')
const regexPassWord = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{6,30}')
export default {
  name: 'rzRegister',
  data() {
    return {
      register_show: true,
      zhuCeName: '',
      zhuCeWords: ''
    }
  },
  props: {
    callback: {}
  },
  methods: {
    changeView() {
      this.$emit('registerShowOn', this.register_show)
    },
    registerNew() {
      // console.log(this.zhuCeName, this.zhuCeWords);
      // console.log(this.$md5("123456"));
      let zhuCeWordsMd5 = this.$md5(this.zhuCeWords)
      let app_sign = [
        this.$APPKEY.app_key,
        zhuCeWordsMd5,
        'App.User.Register',
        this.zhuCeName,
        this.$APPKEY.app_secret
      ]
      // console.log(app_sign);
      let appSignMd5 = this.$md5(app_sign.join('')).toUpperCase()
      // console.log(appSignMd5);
      this.zhuCeName = this.zhuCeName === undefined ? '' : this.zhuCeName.trim()
      this.zhuCeWords = this.zhuCeWords === undefined ? '' : this.zhuCeWords.trim()
      if (!this.zhuCeName.trim()) {
        this.$layer.open({
          content: '请填写用户名',
          skin: 'msg',
          time: 2 //2秒后自动关闭
        })
        return false
      }
      if (!regexName.test(this.zhuCeName.trim())) {
        this.$layer.open({
          content: '请填写用3到8位用户名',
          skin: 'msg',
          time: 2 //2秒后自动关闭
        })
        return false
      }
      if (!this.zhuCeWords.trim()) {
        this.$layer.open({
          content: '请填写密码',
          skin: 'msg',
          time: 2 //2秒后自动关闭
        })
        return false
      }
      if (!regexPassWord.test(this.zhuCeWords.trim())) {
        this.$layer.open({
          content: '密码太简单',
          skin: 'msg',
          time: 2 //2秒后自动关闭
        })
        return false
      }
      let that = this
      this.$axios
        .get('/api/?s=App.User.Register', {
          params: {
            username: this.zhuCeName,
            password: zhuCeWordsMd5,
            app_key: this.$APPKEY.app_key,
            sign: appSignMd5
          }
        })
        .then(function(data) {
          console.log(data)
          if (data.status === 200 && data.data.data.err_code === 0) {
            that.$layer.open({
              content: '注册成功',
              skin: 'msg',
              style: 'background-color:#67d974; color:#fff;',
              time: 2 //2秒后自动关闭
            })
            setTimeout(() => {
              Bus.$emit('zcName', that.zhuCeName)
              that.$emit('registerShowOn', that.register_show)
            }, 2000)
          } else if (data.status === 200 && data.data.data.err_code === 1) {
            that.$layer.open({
              content: '该用户已经注册',
              skin: 'msg',
              time: 2 //2秒后自动关闭
            })
          } else {
            return false
          }
        })
        .catch(function(error) {
          self.fetchError = error
        })
    }
  },
  mounted() {}
}
</script>
